<!DOCTYPE html>
<html lang="en">

<!--23333-->
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="../../main/static/semantics-dist/semantic.min.css">
    <link rel="stylesheet" href="me.css">

    <script src="../../main/static/semantics-dist/semantic.min.js"></script>
</head>
<body>
<nav class = "ui inverted attached segment m-padded-tb-mini">
    <div class="ui container"  >
        <div class="ui inverted secondary menu">
            <h3 class="ui teal header item">T's BLOG</h3>
            <a class="item"> <i class="ui home icon">  </i></a>
            <a class="item"> <i class="ui idea icon">  </i>分类</a>
            <a class="item"><i class="ui tags icon">  </i>标签</a>
            <a class="item"><i class="ui info icon"></i>关于我</a>
            <div class="right item">
                <div class="ui icon inverted input">
                    <input type="text" placeholder="搜索....">
                    <i class="ui search icon"></i>

                </div>
            </div>
        </div>

    </div>

</nav>
<!--    中间内容 -->

<div class="ui error  form segment">
    <div class="ui error message">
        <div class="header">Action Forbidden</div>
        <p>You can only sign up for an account once with a given e-mail address.</p>
    </div>
    <div class="two fields">
        <div class="field">
            <label>First Name</label>
            <input placeholder="First Name" type="text">
        </div>
        <div class="field">
            <label>Last Name</label>
            <input placeholder="Last Name" type="text">
        </div>
    </div>
    <div class="field">
        <label>Gender</label>
        <div class="ui selection dropdown">
            <div class="default text">Select Gender</div>
            <i class="dropdown icon"></i>
            <input type="hidden" name="gender">
            <div class="menu">
                <div class="item" data-value="male">Male</div>
                <div class="item" data-value="female">Female</div>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Username</label>
        <input placeholder="Username" type="text">
    </div>
    <div class="field">
        <label>Password</label>
        <input type="password">
    </div>
    <div class="inline field">
        <div class="ui checkbox">
            <input type="checkbox">
            <label>I agree to the Terms and Conditions</label>
        </div>
    </div>
    <div class="ui submit button">Submit</div>
</div>
<div class="one wide column ">
    <input type="checkbox" name="todo" class="ui blue big checkbox"   id="currenttodofinished" >233333
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer class="ui inverted vertical segment m-padded-tb-massive  ">


    <div class="ui center aligned container">
        <!--gird 拼写错误啊-->

        <div class="ui inverted divided grid">

            <div class="three wide column ">
                <div class="ui inverted link list ">
                    <div class="items">

                        <img src="../images/mio1.png"
                             class="ui round image" alt="" style="width: 130px">
                    </div>
                </div>
            </div>
            <div class="three wide column ">

                <h4 class ="ui inverted header" >最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">等待填充1</a>
                    <a href="#" class="item">等待填充2</a>
                    <a href="#" class="item">等待填充3</a>
                </div>
            </div>
            <div class="three wide column ">
                <h4 class ="ui inverted header">github</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">yonghuname@github.com</a>
                    <a href="#" class="item">等待填充</a>
                    <a href="#" class="item">等待填充</a>
                </div>
            </div>
            <div class="seven wide column ">

                <div class="seven wide column">

                    <h4 class ="ui inverted header">博客介绍</h4>

                    <p  class="m-text-thin m-text-spaced m-opacity-mini ">这是我的个人博客,会分享文章，也可能被拿来做todolist</p>

                </div>
            </div>

        </div>
            <div class="ui inverted divided grid">

            </div>
            <div class="ui inverted section divider "> </div><p class="m-text-thin m-text-spaced m-opacity-mini">All rights reserved  </p>



    </div>

</footer>
</body>


<!--<script  src="https://cdn.jsdeliver.net/semantic-ui/2.2.4/semantic.min.js"></script>-->
<!--<script  src="https://cdn.jsdeliver.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var checkbox1 = document.getElementById('currenttodofinished');
        checkbox1.addEventListener('change', function () {
            // 获取复选框的选中状态
            var isChecked = this.checked;

            alert(isChecked); // true 或 false


            todoFinished = true
            alert("todoFinished:"+todoFinished)
            if(todoFinished ){
                alert("todoFinished:"+todoFinished)
                checkbox1.checked = true
                alert("checkbox1.checked:"+checkbox1.checked)
            }else{
                alert("todoFinished:"+todoFinished)
                checkbox1.checked = false
                alert("checkbox1.checked:"+checkbox1.checked)
            }
            alert("checkbox1.checked:"+checkbox1.checked)
            if (checkbox1.checked ) {
                alert("checkbox.checked = true");
                // checkbox1.checked = true;
            } else {
                alert("checkbox.checked = false");
                // checkbox1.checked = false;
            }



        });
    });

</script>
</html>